<div>
  <div class="text-center mat-bg-primary pt-1 pb-1">
    <h6 class="m-0">{{"Alerts" | translate}}</h6>
  </div>
  <mat-list class="notification-list" role="list">
    <!-- Notification item -->
    <mat-list-item *ngIf="notifications.length === 0" class="notific-item" role="listitem">
      <mat-icon class="notific-icon info-icon">info</mat-icon>
      <div class="mat-list-text">
        <h4 class="message">{{"There are no alerts." | translate}}</h4>
      </div>
    </mat-list-item>
    <mat-list-item *ngFor="let n of notifications" class="notific-item" role="listitem">
      <mat-icon [color]="n.color" class="notific-icon" [matTooltip]="n.icon_tooltip">{{n.icon}}</mat-icon>
        <div class="mat-list-text">
          <h3 class="notific-title {{n.color}}">{{n.level}}</h3>
          <h4 class="message" [innerHTML]="n.message"></h4>
          <small class="time">{{n.time_locale | date: ngDateFormat }} ({{n.timezone}})</small>
          <a (click)="turnMeOff(n,$event)" class="dismiss">{{"Dismiss" | translate}}</a>
        </div>
    </mat-list-item>
    <div class="text-center mt-1" *ngIf="notifications.length">
      <small><a href="#" (click)="closeAll($event)">{{"Dismiss All Alerts" | translate}}</a></small>
    </div>
    <mat-list-item *ngFor="let n of dismissedNotifications" class="notific-item" role="listitem">
      <mat-icon class="notific-icon dismissed" matTooltip="DISMISSED">check_circle</mat-icon>
        <div class="mat-list-text dismissed">
          <h4 class="message" [innerHTML]="n.message"></h4>
          <small class="time">{{n.time_locale | date: ngDateFormat }} ({{n.timezone}})</small>
          <a (click)="turnMeOn(n, $event)" class="dismiss">{{"Re-Open" | translate}}</a>
        </div>
    </mat-list-item>
  </mat-list>
  <div class="text-center mt-1" *ngIf="dismissedNotifications.length">
    <small><a href="#" (click)="reopenAll($event)">{{"Re-Open All Alerts" | translate}}</a></small>
  </div>
</div>
